/*!
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

/* -------------------------------------------------------------- *\
    Variables
\* -------------------------------------------------------------- */

$datepicker_bg: $global-color_white !default;
$datepicker-hover_bg: darken($global-color_white, 7%) !default;
$datepicker_fg: $global-color_grey !default;

$datepicker-date_fg: $button-basic_fg !default;
$datepicker-date_bg: $button-basic_bg !default;
$datepicker-date_borderColor: $button-basic_border !default;

$datepicker-date-hover_fg: $button-basic-hover_fg !default;
$datepicker-date-hover_bg: $button-basic-hover_bg !default;
$datepicker-date-hover_borderColor: $button-basic-hover_border !default;

$datepicker-link-alt_color: $global-color_secondary !default;
$datepicker-link-altHover_color: darken($global-color_secondary, 8%) !default;

$datepicker_border: 1px solid $theme-border_color !default;
$datepicker_borderRadius: 3px !default;
$datepicker_boxShadow: 1px 1px 4px rgba($global-color_black, 0.2) !default;

/* -------------------------------------------------------------- *\
    Styles
\* -------------------------------------------------------------- */

.ui-datepicker {
    border-radius: $datepicker_borderRadius;
    color: $datepicker_fg;
    background-color: $datepicker_bg;

    td a {
        text-align: center;
    }

    a {
        border-radius: $datepicker_borderRadius;
        color: $datepicker-date_fg;
        background-color: $datepicker-date_bg;
        border: 1px solid $datepicker-date_borderColor;

        &:focus,
        &:hover,
        &:active {
            color: $datepicker-date-hover_fg;
            background-color: $datepicker-date-hover_bg;
            border: 1px solid $datepicker-date-hover_borderColor;
        }
    }

    td {
        width: calc(260px / 7);
    }

    .ui-datepicker-today a {
        background-color: rgba(0, 0, 0, 0.03);
    }

    .ui-datepicker-current-day a {
        color: $datepicker-date-hover_fg;
        background-color: $datepicker-date-hover_bg;
        border-color: $datepicker-date-hover_borderColor;
    }

    .ui-datepicker-header {
        background-color: $datepicker-hover_bg;
        border-radius: $datepicker_borderRadius;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .ui-icon {
            @include srOnly;
        }
    }

    .ui-datepicker-prev,
    .ui-datepicker-next {
        position: static;
        height: auto;
        white-space: nowrap;
        color: $component-meta-link_color;
        border-width: 0;
        width: 24px;
        display: flex;
        justify-content: center;
        align-items: center;

        &:focus,
        &:hover {
            border-width: 0;
            background-color: transparent;
            cursor: pointer;
            color: $component-meta-link-hover_color;
        }
    }
    .ui-datepicker-prev::before,
    .ui-datepicker-next::before {
        @include icon;
        font-size: $icon-default_size;
    }

    .ui-datepicker-prev::before {
        content: $icon-chevron-left;
    }

    .ui-datepicker-next::before {
        content: $icon-chevron-right;
    }

    .ui-datepicker-title {
        order: 2;
        position: static;
        margin: 0;
        line-height: inherit;
    }

    .ui-datepicker-next {
        order: 3;
    }
}
